<template>
  <div>
    <tg-control-bar
      v-if="hasControlBar"
      class="control-bar"
      :left-items="controlBarLeftItems"
      :right-items="controlBarRightItems"
    />
    <tg-form-basic-dialog
      ref="ref-searcher"
      :title="searcherTitle"
      :hold-height="searcherHoldHeight"
      :form="searcher"
      :control-bar="searcherControlBar"
      @input="handleSearcherInput($event)"
    />
    <el-table-package
      ref="ref-table"
      :c-m="tableCM"
      :loading="tableLoading"
    />
    <el-pagination-package
      v-show="showPagination"
      class="pagination"
      :total="total"
      :page.sync="page"
      :limit.sync="limit"
      @size-change="doSearch($event)"
      @current-change="loadData($event)"
    />
  </div>
</template>

<script lang="ts">
/*
prop 列表 [参考 TgTable]
form.CM.meta 扩展 [参考 ElTablePackage]
ref 列表 [参考 TgTable]
*/
import { Component, Prop } from 'vue-property-decorator'
import TgTable from './TgTable'
import { appModule } from '@TG/store/modules/app'
import ElPaginationPackage from '../ElPackage/ElPaginationPackage.vue'
import ElTablePackage from '../ElPackage/ElTablePackage.vue'
import TgControlBar from '../TgControlBar/index.vue'
import TgFormBasicDialog from '../TgForm/TgFormBasicDialog.vue'

@Component({
  name: 'TgTableBasic',
  components: {
    ElPaginationPackage,
    ElTablePackage,
    TgControlBar,
    TgFormBasicDialog
  }
})
export default class extends TgTable {
  protected adjustHeight(height: number) {
    let maxHeight: number = height
    if (maxHeight === -1) {
      maxHeight = appModule.pageSize.height
      maxHeight -= 50 // topbar 50
      maxHeight -= 34 // tagbar 33 + 1
    }
    return maxHeight
  }
}
</script>

<style scoped>
.control-bar {
  margin-bottom: 1px;
}

.pagination {
  margin-top: 1px;
  border: 1px solid #dfe6ec;
}
</style>
